<template>
  <div>
    <div class="bg">
      <div @click="goback" class="page-back">
        <img src="../../assets/login/return-white.png" />
      </div>
      <div class="shareIt" @click="popupBox">
        <img src="../../assets/shareIt.png" />
      </div>
      <div class="box">
        <div class="avatar"></div>
        <div class="qrCd">
          <qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>
        </div>
        <div class="content">
          邀请好友，一起学习
        </div>
      </div>
      <!-- <div class="popupBox1">请点击右上方</div> -->
    </div>
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<script>
import wx from "weixin-js-sdk"; // 引入微信SDK
import QrcodeVue from "qrcode.vue";
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";

export default {
  props: [""],
  data() {
    return {
      value: "www.baidu.com",
      // size: 100 //默认100
      renderAs: "svg",
      driver: null,
    };
  },
  components: { QrcodeVue },

  methods: {
    // 分享
    shareEvnt() {
      //wx是引入的微信sdk
      var getwxconfig = "api/wx_sign/share";
      var shareurl = location.href.split("#")[0];

      let me = this;
      this.$axios
        .post(getwxconfig, { callback: shareurl }, { emulateJSON: true })
        .then((kun) => {
          console.log(kun);
          var json = kun.result;
          if (json["appId"]) {
            wx.config({
              //调试模式 truess
              debug: false,
              appId: json["appId"],
              timestamp: json["timestamp"],
              nonceStr: json["nonceStr"],
              signature: json["signature"],
              jsApiList: [
                "updateTimelineShareData",
                "updateAppMessageShareData",
                "onMenuShareWeibo",
                "onMenuShareQZone",
                "hideMenuItems",
                "hideOptionMenu",
                "showOptionMenu",
              ],
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      wx.ready(function() {
        /* 转发好友 */
        wx.updateAppMessageShareData({
          title: "测试标题", // 分享标题
          desc: "测试内容", // 分享描述
          link: "https://jinbiaobiao.com/#/ProductDetails", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl:
            "https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/my_head.png", // 分享图标
          success: function() {
            alert("成功分享朋友圈");
          },
        });
      });
    },
    // 返回
    goback() {
      this.$router.go(-1);
    },
    //
    qrcode() {
      let that = this;
      let qrcode = new QRCode("qrcode", {
        width: 124,
        height: 124,
        text: this.link,
      });
    },
  },
  mounted() {
    // console.log("this.$route.params.name: ", this.$route.params.name);
    this.shareEvnt();
  },
};
</script>

<style lang="scss" scoped>
.popupBox1 {
  width: 50px;
  height: 50px;
}
.bg {
  width: 100%;
  height: 100vh;
  background-image: url(../../assets/bgc.png);
  .page-back {
    position: absolute;
    left: 0.9375rem;
    top: 1.0625rem;
    width: 0.53rem;
    height: 0.94rem;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .shareIt {
    position: absolute;
    right: 0.9375rem;
    top: 1.0625rem;
    width: 0.94rem;
    height: 0.94rem;
    img {
      width: 100%;
    }
  }

  .box {
    position: relative;
    top: 13.9375rem;
    left: 50%;
    transform: translateX(-50%);
    width: 19.575rem;
    height: 22.04375rem;
    background-color: #fff;
    border-radius: 0.78125rem;
    .avatar {
      position: absolute;
      top: -3.90625rem;
      right: 5.875rem;
      width: 7.8125rem;
      height: 7.6625rem;
      border-radius: 50%;
      background-color: red;
    }
    .qrCd {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 10.875rem;
      height: 10.875rem;
      background: #000;
      /deep/ canvas {
        width: 100% !important;
        height: 100% !important;
      }
    }
    .content {
      text-align: center;
      padding-top: 19.25rem;
      font-size: 0.9375rem;
      color: #df3804;
    }
  }
}
</style>
